<template name="channelTools">
  <div class="channel-tools">
    {{#each tool in tools}}
      {{#channelToolsPanel
        id=tool.panelId
        title=tool.panelTitle
      }}
        {{> Template.dynamic template=tool.panel}}
      {{/channelToolsPanel}}
    {{/each}}

    <div class="channel-tools-btns">
      {{#each tool in tools}}
        {{> channelToolsButton
          className=tool.btnClassName
          target=tool.btnTarget
          icon=tool.btnIcon
        }}
      {{/each}}
    </div>
  </div>
</template>

<!-- target:目标id -->
<!-- icon:图标名 -->
<!-- className:额外的class -->
<template name="channelToolsButton">
  <button type="button" class="channel-tools-button {{className}}" data-target-panel="{{target}}">
    <i class="material-icons">{{icon}}</i>
  </button>
</template>

<!-- id:目标id -->
<!-- title:面板名称 -->
<template name="channelToolsPanel">
  <div class="channel-tools-panel d-none" id="{{id}}">
    <div class="channel-tools-panel-header">
      {{title}}
    </div>
    {{> Template.contentBlock}}
  </div>
</template>

<template name='channelSearchPanel'>
  <div class="p-3">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">日期</span>
      </div>
      <input type="text" class="form-control">
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon2">内容</span>
      </div>
      <input type="text" class="form-control">
    </div>
    <button type="button" class="btn btn-outline-primary btn-block">搜索</button>
  </div>
</template>

<template name="channelMembersPanel">
  <div class="form-group p-3 mb-0">
    <input type="text" class="form-control" placeholder="搜索用户">
  </div>
  <div class="list-group list-group-flush">
    <a href="#" class="list-group-item list-group-item-action border-0">Cras justo odio</a>
    <a href="#" class="list-group-item list-group-item-action border-0">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item list-group-item-action border-0">Morbi leo risus</a>
    <a href="#" class="list-group-item list-group-item-action border-0">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item list-group-item-action border-0">Vestibulum at eros</a>
  </div>
</template>

<template name="channelSettingsPanel">
  <div class="p-3">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck1">
      <label class="custom-control-label" for="customCheck1">是否开启通知</label>
    </div>
  </div>
</template>

<template name="channelAppsPanel">
  <!-- soon -->
</template>